<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="js/vue.js"></script>
</head>

<body>
    <div id="box">
        <child>
            <div slot="s2" style="background-color: aquamarine;">若要实现组件实例中使用的元素也会被渲染，则用slot----这里插入的元素将全部被插入到slot插槽中</div>
            <div slot="s1" style="background-color: blueviolet;">无论child里又多少个div，都会全部插入一个slot中，若有多个slot，则全部内容同时重复插入</div>

            <h1 slot="s1">若要分别插入各个插槽中，则需要命名</h1>
        </child>
    </div>
    <script>
        Vue.component("child", {
            template: `
                <div>
                    <slot name="s1"></slot>
                    child--内部的元素会覆盖组件实例中插入的元素--组件实例已被覆盖。
                    若用了slot则组件实例不会被覆盖
                    <slot name="s2"></slot>
                </div>     
           `
        })
        var vm = new Vue({
            el: "#box",
            data: {}
        })
    </script>
</body>

</html>